
<template>
  <div class="set_commission-container">
    <breadcrumb style></breadcrumb>
    <div class="content">
      <el-main>
        <div class="box">
          <el-row class="row1">
            <el-col :span="13">
              <div class="grid-content bg-purple">
                充
                <el-input type="number" v-model="input" style="width:90px;margin:0 10px;"></el-input>M &nbsp; 流量,&nbsp; 送
                <el-input type="number" v-model="input2" style="width:90px;margin:0 10px;"></el-input>个 钻石, &nbsp; 金额
                <el-input type="number" v-model="input3" style="width:90px;margin:0 10px;"></el-input>元
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="box">
          <el-row class="row1">
            <el-col :span="13">
              <div class="grid-content bg-purple">
                充
                <el-input type="number" v-model="inputOne" style="width:90px;margin:0 10px;"></el-input>M &nbsp; 流量,&nbsp; 送
                <el-input type="number" v-model="inputTwo" style="width:90px;margin:0 10px;"></el-input>个 钻石, &nbsp; 金额
                <el-input type="number" v-model="inputThree" style="width:90px;margin:0 10px;"></el-input>元
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="box">
          <el-row class="row1">
            <el-col :span="13">
              <div class="grid-content bg-purple">
                充
                <el-input type="number" v-model="inputOne1" style="width:90px;margin:0 10px;"></el-input>M &nbsp; 流量,&nbsp; 送
                <el-input type="number" v-model="inputTwo1" style="width:90px;margin:0 10px;"></el-input>个 钻石, &nbsp; 金额
                <el-input type="number" v-model="inputThree1" style="width:90px;margin:0 10px;"></el-input>元
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="box">
          <el-row class="row1">
            <el-col :span="13">
              <div class="grid-content bg-purple">
                充
                <el-input type="number" v-model="inputOne2" style="width:90px;margin:0 10px;"></el-input>M &nbsp; 流量,&nbsp; 送
                <el-input type="number" v-model="inputTwo2" style="width:90px;margin:0 10px;"></el-input>个 钻石, &nbsp; 金额
                <el-input type="number" v-model="inputThree2" style="width:90px;margin:0 10px;"></el-input>元
              </div>
            </el-col>
          </el-row>
        </div>

        <el-footer>
          <el-button type="primary" @click="getSetting">确 定</el-button>
          <el-button style="color: #409eff" @click="$router.go(-1)">取 消</el-button>
        </el-footer>
      </el-main>
    </div>
  </div>
</template>


<script>
import breadcrumb from "../../components/breadcrumb";
export default {
  components: { breadcrumb },
  data() {
    return {
      //第一轮设置
      input: "",
      input2: "",
      input3: "",
      //第二轮设置
      inputOne: "",
      inputTwo: "",
      inputThree: "",
      //第三轮设置
      inputOne1: "",
      inputTwo1: "",
      inputThree1: "",
      //第四轮设置
      inputOne2: "",
      inputTwo2: "",
      inputThree2: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getSetting() {
      if (
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.input) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputOne) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputOne1) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputOne2)
      ) {
        this.getList();
        return this.$message({
          type: "warning",
          message: "充值流量不能为空且大于0"
        });
      }
      if (
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.input2) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputTwo) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputTwo1) ||
        !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputTwo2)
      ) {
        this.getList();
        return this.$message({
          type: "warning",
          message: "所送砖石不能为空且大于0"
        });
      }
      if (
        !this.input3 ||
        !this.inputThree ||
        !this.inputThree1 ||
        !this.inputThree2
        // !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.input3) ||
        // !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputThree) ||
        // !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputThree1) ||
        // !/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(this.inputThree2)
      ) {
        this.getList();
        return this.$message({
          type: "warning",
          message: "金额不能为空且大于0"
        });
      }
      let formData = new FormData();
      let flowConf = [
        {
          id: 1,
          muchFlow: this.input,
          muchBalance: this.input2,
          muchPrice: this.input3
        },
        {
          id: 2,
          muchFlow: this.inputOne,
          muchBalance: this.inputTwo,
          muchPrice: this.inputThree
        },
        {
          id: 3,
          muchFlow: this.inputOne1,
          muchBalance: this.inputTwo1,
          muchPrice: this.inputThree1
        },
        {
          id: 4,
          muchFlow: this.inputOne2,
          muchBalance: this.inputTwo2,
          muchPrice: this.inputThree2
        }
      ];

      this.$axios.post("web_flow/conf_save_update", flowConf).then(res => {
        //console.log(res);
        if (res.data.status == 0) {
          this.$message.success("设置成功");
        }
        this.getList();
      });
    },
    async getList() {
      const { data: res } = await this.$axios.post("web_flow/conf_list");

      this.input = res.data[0].muchFlow;
      this.input2 = res.data[0].muchBalance;
      this.input3 = res.data[0].muchPrice;
      this.inputOne = res.data[1].muchFlow;
      this.inputTwo = res.data[1].muchBalance;
      this.inputThree = res.data[1].muchPrice;
      this.inputOne1 = res.data[2].muchFlow;
      this.inputTwo1 = res.data[2].muchBalance;
      this.inputThree1 = res.data[2].muchPrice;
      this.inputOne2 = res.data[3].muchFlow;
      this.inputTwo2 = res.data[3].muchBalance;
      this.inputThree2 = res.data[3].muchPrice;
    }
  }
};
</script>



<style lang="less" scoped>
.set_commission-container {
  @import "../../style/card.less";
  display: flex;
  flex-flow: column;
  height: 100%;
  .price {
    width: 70px !important;
    .el-input__inner {
      width: 70px !important;
    }
  }
  .el-collapse-item {
    .el-collapse-item__content {
      padding-left: 45px;
      display: flex;
      .el-form {
        width: 310px;
        display: flex;
        flex-direction: column;
        margin-right: 85px;
        .el-form-item {
          margin-bottom: 30px !important;
        }
      }
    }
  }
  .box {
    // background-color: #eee;
    margin: 20px 0;
  }
  .box > .row {
    font-size: 16px;
    font-weight: 700;
  }
  .box > .row1 {
    font-size: 16px;
    font-weight: 600;
  }
  .box > .row1 .el-input__inner {
    // width: 40px;
    height: 30px;
    padding: 0 5px !important;
  }
  .box > .row span {
    display: inline-block;
    color: red;
  }
  .el-row {
    // margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    min-width: 110px;
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    min-width: 40px;
  }
  .row-bg {
    // padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>
